<template>
  <div class="a">
    <van-nav-bar title="添加收货地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="b">
      <div>
        <span>联系人:</span>
        <input type="text" placeholder="请输入联系人的姓名" v-model="name" />
      </div>
      <div>
        <span>手机号码:</span>
        <input type="text" placeholder="请输入联系人的手机号" v-model="phone" />
      </div>

      <div>
        <div @click="show = true">
          <span>详细地址:</span>
          <input type="text" placeholder="请输入地址" v-model="choosevalue" />
        </div>
        <!-- <van-cell title="省份城市" is-link @click="show = true" /> -->
        <van-popup v-model:show="show" position="bottom" :style="{ height: '60%' }">
          <van-area title="选择" :area-list="areaListData" :columns-placeholder="['省份', '城市', '区县']" @confirm="backV" />
        </van-popup>
      </div>

      <div>

        <span>默认:</span>
        <van-switch class="moren" v-model="checked" />
      </div>

      <div><button @click="saveAddress">保存</button></div>
      <!-- <div><button @click="2">查看全部地址</button></div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { areaList } from '@vant/area-data';
import { useRouter } from "vue-router";
import { httpPostToken } from "../../utils/request";
import { showDialog, showToast } from "vant";
const areaListData = areaList;
//初始数据源
const name = ref('')
const phone = ref('')
const show = ref(false)
const choosevalue = ref('')
const router = useRouter()
// 返回按钮
const onClickLeft = () => {
  router.go(-1)
};
// 回填地址的值
const backV = (values: any) => {
  console.log(values.selectedOptions[0].text);
  choosevalue.value = values.selectedOptions[0].text + values.selectedOptions[1].text + values.selectedOptions[2].text

  show.value = false; // 关闭弹出层
};

// 默认按钮 开关
const checked = ref(1)
// 新增地址   /api/address   post token
const saveAddress = async () => {
  try {
    const response = await httpPostToken('/api/address', 'POST', {
      phone: phone.value,
      name: name.value,
      address: choosevalue.value,
      moren: checked.value
    });
    showToast({ message: "新增成功"});
    // console.log('保存成功:', response);
    router.push('/introduct')
  } catch (error) {
    console.error('保存失败:', error);
  }
};
</script>







<style lang="less" scoped>
input {
  border-style: none;
  margin: 20px;
  padding: 20px;
  font-size: 30px;
}

button {
  background-color: #03a19c;
  color: #fff;
  width: 90%;
  line-height: 80px;
  height: 80px;
  margin: 20px 20px;
  font-size: 30px;
  border-radius: 80px;
  border: none;
  margin-top: 20px;
}

span {
  display: inline-block;
  font-size: 30px;
  font-weight: 400;
  width: 140px;
  margin-left: 30px;
  margin-top: 30px;
  color: #666;
}

.b {
  margin-top: 80px;
  margin-left: 20px;
  font-size: 30px;
  color: #666;
}

.moren {
  margin-left: 60px;
  margin-top: 20px;
  margin-bottom: 20px;
  vertical-align: middle;
  font-size: 40px;
}

.dizhi {
  margin-top: 20px;
  font-size: 40px;
  text-align: left;
  color: #666;
  margin-left: 180px;
}
</style>